<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <div id="div" style="width: 200px; height: 200px; border: 1px solid #ccc">
      <button id="btn"></button>
      111111111
    </div>
  </head>
  <body>
    <script>
      let isFullScreen = false;
      let btn = document.getElementById("btn");
      let div = document.getElementById("div");
      window.addEventListener("keydown", function (e) {
        if (e.keyCode === 122) {
          e.keyCode = 0;
          e.returnValue = false;
          screenShow(btn);
          console.log(1);
        }
      });

      // 全屏展示
      function screenShow(e) {
        var el = e;
        if (isFullScreen) {
          // 退出全屏
          setTimeout(() => {
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.mozCancleFullScreen) {
              document.mozCancleFullScreen();
            } else if (document.webkitExitFullScreen) {
              document.webkitExitFullScreen();
            } else if (!document.msRequestFullscreen) {
              document.msRequestFullscreen();
            }
          });
        } else {
          // 进入全屏
          setTimeout(() => {
            if (el.requestFullscreen) {
              el.parentElement.requestFullscreen();
            } else if (el.mozRequestFullScreen) {
              el.parentElement.mozRequestFullScreen();
            } else if (el.webkitRequestFullscreen) {
              el.parentElement.webkitRequestFullscreen();
            } else if (el.msRequestFullscreen) {
              isFullScreen = true;
              el.parentElement.msRequestFullscreen();
            }
          });
        }
      }
    </script>
  </body>
</html>
